<!doctype html>
<html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="keywords" content="">
  <meta name="description" content="mezz">
  <meta name="author" content="mezz">
  <link href="css/css.css" rel="stylesheet">
  <link href="css/chosen.css" rel="stylesheet">
  <!--[if lt IE 9]>
  <link href="css/ie.css" rel="stylesheet" type="text/css" >
  <meta http-equiv="X-UA-Compatible" content="IE=8" >
  <![endif]-->
  <!--[if lte IE 6]><meta http-equiv="refresh" content="0;url=IE6/IE6.html"><![endif]-->
  <link href="favicon.ico" rel="SHORTCUT ICON">
  <title>17素材·私厨 - 为你推荐遍布全球最新鲜，最与众不同的顶级生活方式</title>

  <!----------------------------------------------引用js和css-------------------------------------------->
  <!--导入的   vue.js,jquery.js,element.js,element.css--->
  <script src="./js/vue.min.js"></script>
  <script src="./js/jquery-3.5.1.min.js"></script>
  <!-- Element-UI -->
  <!-- 引入组件库 -->
  <script src="./js/element-ui/index.js"></script>
  <!-- 引入样式 -->
  <link href="./css/element-ui/index.css" rel="stylesheet">
  <!--------------------------------------------------------------------------------------------------->
  <style type="text/css" >

    .baseStyles{
      color: black;
    }
    .overStyles{
      color: red
    }
  </style>

</head>
<body>
<!-----------------------------------------顶层Vue [active]------------------------------------------>
<div id="active">
  <!---------------------------------------头部[head]--------------------------------------------------->
  <div class="head">
    <div class="wrap clearfix">
      <a href="index.html" class="logo indent">logo</a>
      <div class="headr fr">
        <form action="active.html" method="post" class="headsearch">
          <label class="label">
            <input type="text" value="" name="" class="key" v-model="search">
            <span class="text" v-model="search">搜索地址、名称、时间等</span>
          </label>
          <button type="button" class="button btn-search" @click="getserach()">&#xe628;</button>
        </form>
        <a href="Release.html"><em><img src="images/sb.png"></em>  &nbsp;&nbsp;发布我的饭局</a>
        <div class="user">
        <span class="clearfix"><span class="userimg"><img :src=uinfos.tx><i></i></span>
        <a href="javascript:;" class="fr">{{uinfos.nc}} <em>&#xe607;</em></a></span>
          <ul class="topslide">
            <li><em>&#xe627;</em><a href="mem.html">个人设置</a></li>
            <li><em>&#xe63d;</em><a href="Message.html">消息中心</a></li>
            <li><em>&#xe63c;</em><a href="Dinner.html">饭局管理</a></li>
            <li><em>&#xe63e;</em><a href="fans.html">我的好友</a></li>
            <li><em>&#xe61b;</em><a href="My_Messages.html" >我的留言</a></li>
            <li  onclick="exit()"><em>&#xe611;</em><a href="login.html">退出</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!---------------------------------------------------------------------------------------------------->

  <!---------------------------------------中部[warp]--------------------------------------------------->
  <div class="activewrap wrap clearfix">
    <div class="section fl">
      <div class="Condition clearfix" style="overflow: hidden">

        <div style="border: red 0px solid;width: 280px;float: left" class="item classfy">
          <h1>类别</h1>
          <template v-for="(type,index) in types">
            <a href="javascript:;" :id=index+20 @click="changeLink(index+20,type.name)" class="baseStyles">{{type.name}}</a>
          </template>
        </div>
        <div style="border: red 0px solid;width: 400px" class="item time">
          <h1>时间</h1>
          <div style="border: 0px red solid;overflow: hidden">
            <el-date-picker
                    size="small"
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions">
            </el-date-picker>
          </div>

        </div>
        <div style="border: red 0px solid;width: 280px" class="item place">
          <h1>地点</h1>
          <template v-for="(address,index) in places">
            <a href="javascript:;" :id=index+40 @click="changePlace(index+40,address.place)" class="baseStyles">{{address.place}}</a>
          </template>
        </div>
        <div style="border: red 0px solid;width: 270px" class="item Number">
          <h1>就餐人数</h1>
          <template>
            <el-input-number v-model="num" size="mini" :min="1" :max="10" label="参加人数"></el-input-number>
          </template>
        </div>
        <div style="border: red 0px solid;width: 50px;" class="item Number">
          <template>
            <el-button plain style="margin-top: 10px" @click="selectTo()">查询</el-button>
          </template>
        </div>
      </div>

      <div class="sortbar mt10 clearfix">
        <ul class="nav-pills">
          <li class="current"><a href="javascript:;" title="全部"  @click="softGruopAll()">全部</a></li>
          <li id="t1"><a href="javascript:;" title="时间从远到近" id="time" @click="softGruopTime()">时间<em class="ico time"></em></a></li>
          <li id="t2"><a href="javascript:;" title="菜金从高到低" id="money" @click="softGruopMoney()">菜金<em class="ico price"></em></a></li>
        </ul>
      </div>

      <ul class="active-list">
        <template v-for="(items,index) in activityShows" :key="items.activity.id">
         <li >
            <div class="img">
              <a href="javascript:;" @click="tiaozhuan(items)"><img :src=items.activity.img width="730px" height="220px"></a>
              <div class="bottominfo">
              <span class="label"><a href="javascript:;">{{items.activity.wanfa}}&nbsp;&nbsp;{{items.activity.title}}</a>
                  <a href="javascript:">{{items.activity.tag}}</a>
                </span><a href="#" class="Sign_up" @click="baoming(items.activity)" v-if="endactivity[index]==true">我要报名</a>
              </div>
            </div>
            <div class="active-info">
              <div class="user">
                <a href="#" class="userimg"><img :src=items.user.tx width="100%" height="100%"></a>
                <a href="#">{{items.user.nc}}</a><em class="user-level"></em><em class="user-level"></em><em class="user-level"></em>
              </div>
              <div class="txt">{{items.activity.text}}</div>
              <span class="o">{{items.activity.price}}元/每人&nbsp;&nbsp;最大人数({{items.activity.max_people}}位) </span>  &nbsp;开始时间: {{items.activity.c_time}}&nbsp;&nbsp;结束时间: {{items.activity.end_time}}
            </div>
          </li>
        </template>
      </ul>

      <div class="page2">
        <div class="block">
          <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[1, 2, 3, 4]"
                  :page-size=pageSize
                  layout="total, sizes, prev, pager, next, jumper"
                  :total=count>
          </el-pagination>
        </div>
      </div>

    </div>

    <div class="aside fr">
      <h1 class="header">热门活动</h1>
      <div class="hot-active">
        <template >
          <a href="#" class="img"><img :src=Maxactive[0].img height="100%" width="100%"></a>
          <div class="active-info">
            <div class="user">
              <a href="#" class="userimg"><img :src=Maxuser.tx width="100%" height="100%"></a>
              <a href="#">{{Maxuser.nc}}</a>
            </div>
            <div class="hd"><a href="#">{{Maxactive[0].title}}</a></div>
            <span class="o">{{Maxactive[0].price}}元/每人({{Maxactive[0].max_people}}位) </span>  {{Maxtime}}
          </div>
        </template>
      </div>
      <ul class="active-news">
        <template v-for="(value,index) in zixun">
          <li><span class="time">{{value.activity.c_time}}</span><a href="#">{{value.activity.title}}</a></li>
      </template>
      </ul>
    </div>

  </div>
  <!---------------------------------------------------------------------------------------------------->

  <!---------------------------------------底部[foot]--------------------------------------------------->
  <div id="foot">
    <div class="footmenu">
      <div class="wrap clearfix">
        <!--------------------------------------------------循环页脚内容------------------------------------------------->
        <template v-for="n in 4">
          <div class="item ">
            <h1 class="hd">产品理念</h1>
            <ul>
              <li><a href="#">食品安全</a></li>
              <li><a href="#">订购流程</a></li>
              <li><a href="#">修改订单</a></li>
              <li><a href="#">冷链配送</a></li>
              <li><a href="#">全程冷链</a></li>
            </ul>
          </div>
        </template>
        <!------------------------------------------------------------------------------------------------------------->
        <div class="fr">
          <img src="images/img2.jpg">
          <img src="images/img3.jpg">
        </div>
      </div>
      <div class="gotop">&#xe608;</div>
    </div>
  </div>
  <!---------------------------------------------------------------------------------------------------->

  <div class="foot tc">Copyright © 2003-2015 17素材, All Rights Reserved</div>
</div>

<!---------------------------------------引用自己的js文件----------------------------------------------->
  <script src="./js/lgw/active.js" type="module"></script>

<!----------------------------------------------------------------------------------------------------->


<script src="js/jquery.js"></script>
<script src="date/WdatePicker.js"></script>
<script src="js/Action.js"></script>
<script src="js/chosen.jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function($){
    //select 样式美化
    var config = {
      '.chosen-select-no-single' : {disable_search_threshold:10}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }
  });
</script>
</body>
</html>